
exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _event = require('../utils/dom/event');

const _touch = require('../mixins/touch');

const _field = require('../mixins/field');

const _createNamespace = (0, _utils.createNamespace)('slider');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  mixins: [_touch.TouchMixin, _field.FieldMixin],
  props: {
    disabled: Boolean,
    vertical: Boolean,
    barHeight: [Number, String],
    buttonSize: [Number, String],
    activeColor: String,
    inactiveColor: String,
    min: {
      type: [Number, String],
      default: 0,
    },
    max: {
      type: [Number, String],
      default: 100,
    },
    step: {
      type: [Number, String],
      default: 1,
    },
    value: {
      type: Number,
      default: 0,
    },
  },
  data: function data() {
    return {
      dragStatus: '',
    };
  },
  computed: {
    range: function range() {
      return this.max - this.min;
    },
    buttonStyle: function buttonStyle() {
      if (this.buttonSize) {
        const size = (0, _utils.addUnit)(this.buttonSize);
        return {
          width: size,
          height: size,
        };
      }
    },
  },
  created: function created() {
    // format initial value
    this.updateValue(this.value);
  },
  mounted: function mounted() {
    this.bindTouchEvent(this.$refs.wrapper);
  },
  methods: {
    onTouchStart: function onTouchStart(event) {
      if (this.disabled) {
        return;
      }

      this.touchStart(event);
      this.startValue = this.format(this.value);
      this.dragStatus = 'start';
    },
    onTouchMove: function onTouchMove(event) {
      if (this.disabled) {
        return;
      }

      if (this.dragStatus === 'start') {
        this.$emit('drag-start');
      }

      (0, _event.preventDefault)(event, true);
      this.touchMove(event);
      this.dragStatus = 'draging';
      const rect = this.$el.getBoundingClientRect();
      const delta = this.vertical ? this.deltaY : this.deltaX;
      const total = this.vertical ? rect.height : rect.width;
      const diff = delta / total * this.range;
      this.newValue = this.startValue + diff;
      this.updateValue(this.newValue);
    },
    onTouchEnd: function onTouchEnd() {
      if (this.disabled) {
        return;
      }

      if (this.dragStatus === 'draging') {
        this.updateValue(this.newValue, true);
        this.$emit('drag-end');
      }

      this.dragStatus = '';
    },
    onClick: function onClick(event) {
      event.stopPropagation();
      if (this.disabled) return;
      const rect = this.$el.getBoundingClientRect();
      const delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
      const total = this.vertical ? rect.height : rect.width;
      const value = +this.min + delta / total * this.range;
      this.startValue = this.value;
      this.updateValue(value, true);
    },
    updateValue: function updateValue(value, end) {
      value = this.format(value);

      if (value !== this.value) {
        this.$emit('input', value);
      }

      if (end && value !== this.startValue) {
        this.$emit('change', value);
      }
    },
    format: function format(value) {
      return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
    },
  },
  render: function render() {
    let _wrapperStyle; let
      _barStyle;

    const h = arguments[0];
    const { vertical } = this;
    const mainAxis = vertical ? 'height' : 'width';
    const crossAxis = vertical ? 'width' : 'height';
    const wrapperStyle = (_wrapperStyle = {
      background: this.inactiveColor,
    }, _wrapperStyle[crossAxis] = (0, _utils.addUnit)(this.barHeight), _wrapperStyle);
    const barStyle = (_barStyle = {}, _barStyle[mainAxis] = `${(this.value - this.min) * 100 / this.range}%`, _barStyle.background = this.activeColor, _barStyle);

    if (this.dragStatus) {
      barStyle.transition = 'none';
    }

    return h('div', {
      style: wrapperStyle,
      class: bem({
        disabled: this.disabled,
        vertical,
      }),
      on: {
        click: this.onClick,
      },
    }, [h('div', {
      class: bem('bar'),
      style: barStyle,
    }, [h('div', {
      ref: 'wrapper',
      attrs: {
        role: 'slider',
        tabindex: this.disabled ? -1 : 0,
        'aria-valuemin': this.min,
        'aria-valuenow': this.value,
        'aria-valuemax': this.max,
        'aria-orientation': this.vertical ? 'vertical' : 'horizontal',
      },
      class: bem('button-wrapper'),
    }, [this.slots('button') || h('div', {
      class: bem('button'),
      style: this.buttonStyle,
    })])])]);
  },
});

exports.default = _default;
